<template>
  <div class="genera-selector">
    <transition name="el-zoom-in-center">
      <el-card v-show="show_genera">
        <el-row>
          <div  style="padding: 10px 15px;">
            <el-row>
              <el-col :span="8" style="margin-left: 5%;"><span >曲リスト</span></el-col>
              <el-col :span="5" :offset="4" style="float: right">
                <el-dropdown trigger="click" @command="handleLvSelector">
                        <span class="el-dropdown-link">
                          级别<i class="el-icon-caret-bottom el-icon--right"></i>
                        </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="9">9/9+</el-dropdown-item>
                    <el-dropdown-item command="10">10/10+</el-dropdown-item>
                    <el-dropdown-item command="11">11/11+</el-dropdown-item>
                    <el-dropdown-item command="12">12/12+</el-dropdown-item>
                    <el-dropdown-item command="13">13</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </div>
        </el-row>
        <el-row>
          <el-col :span="12">
                  <span class="genera-wrapper">
                    <el-button type="primary" :plain="true" class="btn-touhou" @click="setGenera(3)">東方project</el-button>
                    <el-button type="info" :plain="true" class="btn-pops" @click="setGenera(1)">POPS <br>& ANIME</el-button>
                    <el-button type="warning" :plain="true" class="btn-sega" @click="setGenera(4)">SEGA</el-button>
                </span>
          </el-col>
          <el-col :span="12">
                   <span class="genera-wrapper">
                    <el-button type="info" :plain="true" class="btn-game" @click="setGenera(5)">GAME <br>& VARIRTY</el-button>
                    <el-button type="success" :plain="true" class="btn-original" @click="setGenera(6)">ORIGINAL <br>& JOYPOLIS</el-button>
                    <el-button type="danger" :plain="true" class="btn-nico" @click="setGenera(2)">niconico <br>& VOCALOID</el-button>
                </span>
          </el-col>
        </el-row>
      </el-card>
    </transition>
  </div>
</template>
<style  lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../style/color"
  @import "../style/base.css"
  .genera-selector
    margin 15px 0;
    margin-top 60px;
  .genera-wrapper
    button
      display block;
      margin  10px auto;
      min-height: 55px;
      min-width: 138px;
    .btn-touhou
      border-color: touhou-color;
      color: touhou-color
      &:hover
        border-color: touhou-color;
        color: touhou-color;
    .btn-game
      border-color: game-color;
      color: game-color
      &:hover
        border-color: game-color;
        color: game-color
    .btn-pops
      border-color: pops-color;
      color: pops-color;
      &:hover
        border-color: pops-color;
        color: pops-color;
    .btn-original
      border-color: original-color;
      color: original-color;
      &:hover
        border-color: original-color;
        color: original-color;
    .btn-sega
      border-color: sega-color;
      color: sega-color;
      &:hover
        border-color: sega-color;
        color: sega-color;
    .btn-nico
      border-color: nico-color;
      color: nico-color;
      &:hover
        border-color: nico-color;
        color: nico-color;

</style>

<script>
  export default {
    data() {
      return {
        show_genera: false
      };
    },
    mounted() {
      setTimeout(() => this.show_genera = true, 100);
    },
    methods: {
      handleLvSelector (command) {
        this.$store.commit('CLEAR_PAGER');
        this.$store.commit('CLEAR_LIST');
        this.$store.commit('SET_GENERA', 0);
        this.$store.commit('SET_SEARCH_LV', command);
        this.$store.commit('SHOW_LIST', false);
        this.$store.commit('NO_MORE', false);
        this.$store.dispatch('getMailist').then(() => {
          this.$store.commit('ADD_PAGE');
          this.$store.commit('SHOW_LIST', true);
        });
      },
      setGenera(genera_id) {
        this.$store.commit('SET_SEARCH_LV', 0);
        this.$store.commit('CLEAR_LIST');
        this.$store.commit('CLEAR_PAGER');
        this.$store.commit('SET_GENERA', genera_id);
        this.$store.commit('SHOW_LIST', false);
        this.$store.commit('NO_MORE', false);
        this.$store.dispatch('getMailist').then(() => {
          this.$store.commit('ADD_PAGE');
          this.$store.commit('SHOW_LIST', true);
        }).catch((res) => {
          if (res.no_more) {
            this.$message('没有更多数据了');
          }
        });
      }
    }
  }
</script>